-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: delayed hydration #26468
base: main
Are you sure you want to change the base?
feat: delayed hydration #26468
Conversation
Run & review this pull request in StackBlitz Codeflow. |
β¦ future wrappers
π |
packages/nuxt/src/components/runtime/client-delayed-component.ts
Outdated
Show resolved
Hide resolved
idleHandle = null | ||
} | ||
}) | ||
return () => h('div', {}, [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need a div here ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We do not, I was thinking about it here, I'll remove it
Now that I think about it, do we need the div in the visibility based component in the import.meta.server check?
I was thinking of changing up the way visibility based component behaves, to ensure we don't pollute the DOM unnecessarily with extra nodes. What do you think? Do note I wrote this on my phone right in this message so it may have some mistakes, but I'm talking about the general idea. return () => {
if (!isIntersecting.value && (!instance.vnode.el || !nuxt.isHydrating)) {
return h('div', { ref: el });
}
if (isIntersecting.value) {
return h(componentLoader, attrs);
} else {
const fragmentHTML = getFragmentHTML(instance.vnode.el ?? null, true)?.join('') || '';
return createVNode(createStaticVNode(fragmentHTML, 1));
}
}; |
π Linked issue
#24242
β Type of change
π Description
Lazy loading is a very beneficial addition to the nuxt core. Natively supporting delayed hydration will provide significant performance improvement. Moreover, it will reduce the amount of boilerplate code needed for manual implementations, and will reduce bundle size by not requiring external modules for something that may very well be handled out-of-the-box, as part of the
Lazy
components behavior.π Checklist
TODO (optional):